import React, {useState} from 'react'
import {message} from 'antd'
import Hover from './Hover'
import NamePanel from './NamePanel'
import useFamiliar from '../hooks/useFamiliar'
import recognize from '../lib/recognize'

export default ({id, name, speech, pic, onNext, classname}) => {
  const isFamiliar = useFamiliar()
  const [wrongCount, setWrongCount] = useState(0)
  const [finished, setFinished] = useState(false)
  const increaseWrongCount = () => setWrongCount(pre => pre + 1)
  const onFinish = () => {
    if(isFamiliar() && wrongCount === 0) {
      message.success('太棒了！')
      recognize(id)
    }
    setFinished(true)
  }
  const toNext = () => {
    onNext({wrongCount})
  }

  return (
    <div style={{
      position: 'relative'
    }}>
      <div style={{
        textAlign: 'center',
        margin: 15
      }}>
        <img alt={name}
             style={{width: '100%'}}
             src={`${process.env.PUBLIC_URL}/pics/${pic}`}/>
      </div>
      <NamePanel answer={id} onWrong={increaseWrongCount}
                 classname={classname}
                 onFinish={onFinish}/>
      <Hover title={name} pic={pic} speech={speech}
             visible={finished}
             toNext={toNext}/>
    </div>
  )
}
